<template>
  <InlineLayout title-name="原始人员信息列表">
    <template #header>
      <my-form ref="ruleForm" v-model:modelValue="dataForm" :model="dataForm" :items-datas="itemsDatas">
        <my-button type="reset" title="重置" @click="reset" />
        <my-button v-loading="loading" type="search" title="查询" @click="search" />
      </my-form>
    </template>

    <!-- <template #titleTools>
        <my-button type="add" title="新增人员" @click="addClick" />
        <my-button type="export" title="人员导出" @click="handleExport" />
      </template> -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="在职人员" name="first" />
      <el-tab-pane label="离退人员" name="second" />
    </el-tabs>
    <my-table v-loading="loading" :columns="columns" :table-data="tableData" @selection-change="handleSelectionChange">
      <template #operation="scope">
        <my-button type="text" @click="handleDetail(scope.row)">详情</my-button>
      </template>
    </my-table>
    <template #footer>
      <pagination v-model:page="dataForm.pageNum" v-model:limit="dataForm.pageSize" :total="total" @pagination="getList" />
    </template>
  </InlineLayout>
  <addOrEdit v-model="visible" :dialog-title="title" :current-row="currentRow" @ini-search="search" />
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import addOrEdit from '@/views/yuanshidian/ab02/components/addOrEdit.vue';
import { listAb02 } from '@/api/yuanshidian/ab02/index';
import { listAb03 } from '@/api/yuanshidian/ab03/index';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const total = ref(0);
const recordShow = ref(false);
const activeName = ref('first');
const ruleForm = ref<ElFormInstance>();
const loading = ref(false);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const headers = ref({});
const fileList = ref([]);
const paramsDataObj = ref({});
const state = reactive({
  visible: false,
  isShow: false,
  auditIsShow: false,
  title: '',
  dataForm: {
    pageNum: 1,
    delStatus: 0,
    pageSize: 10
  },
  currentRow: {},
  itemsDatas: [
    { label: '单位编码', prop: 'dw01', type: 'input' },
    { label: '单位名称', prop: 'dw02', type: 'input' },
    { label: '姓名', prop: 'gr04', type: 'input' },
    { label: '证件号码', prop: 'gr02', type: 'input' }
  ],

  tableData: [],
  columns: [
    { label: '序号', type: 'index', width: '55', prop: 'index' },
    { label: '统筹区编码', prop: 'aaa027', align: 'center' },
    { label: '个人编号', prop: 'gr01', align: 'center' },
    { label: '身份证号码', prop: 'gr02', align: 'center' },
    { label: '姓名', prop: 'gr04', align: 'center' },
    { label: '单位编码', prop: 'dw01', align: 'center' },
    { label: '单位名称', prop: 'dw02', align: 'center' },
    { label: '个人账号', prop: 'gr03', align: 'center' },
    { label: '性别', prop: 'gr05', align: 'center', width: '80px' },
    { label: '出生年月', prop: 'gr07', align: 'center' },
    { label: '民族', prop: 'gr06', align: 'center', width: '80px' },
    { label: '操作', type: 'operation', width: '80px' }
  ]
});
const { itemsDatas, tableData, columns, dataForm, isShow, currentRow, visible, title, auditIsShow } = toRefs(state);

//列表初始化
const getList = async () => {
  loading.value = true;
  var res = await listAb02(dataForm.value);
  tableData.value = res.rows;
  total.value = res.total;
  loading.value = false;
};
const getList1 = async () => {
  loading.value = true;
  var res = await listAb03(dataForm.value);
  tableData.value = res.rows;
  total.value = res.total;
  loading.value = false;
};
//重置
const reset = () => {
  ruleForm.value?.resetFields();
  search();
};
//查询
const search = () => {
  if (activeName.value === 'first') {
    //在职人员
    getList();
  } else {
    //离退人员
    getList1();
  }
};
//tabs切换
const handleClick = (tab) => {
  activeName.value = tab.paneName;
  console.log(tab.paneName);
  if (tab.paneName === 'first') {
    //在职人员
    getList();
  } else {
    //离退人员
    getList1();
  }
};
//查看详情
const handleDetail = (data) => {
  title.value = '详情';
  currentRow.value = {
    id: data.id,
    type: 'detail',
    activeName: activeName.value
  };
  visible.value = true;
};
onMounted(() => {
  getList();
});
</script>
